<template>
  <div class="box-con">
    <div class="c-item">
      <div class="title-item animate__animated animate__fadeInUp">
        建设人员疏散通道情况
      </div>
      <div class="header">
        <div class="h-item" v-for="(item, index) in headerList" :key="index">
          <div class="name">{{ item.name }}</div>
          ：
          <div class="name">{{ item.value }}</div>
        </div>
      </div>
      <div class="content2 animate__animated animate__fadeInUp">
        <left1
          :key="currentIndex"
          style="padding: 10px 0 0 20px"
          :data1="dataOne"
          :data2="dataTow"
          :data3="dataThree"
        ></left1>
      </div>
    </div>
    <div class="c-item">
      <div class="title-item animate__animated animate__fadeInUp">
        清理电动自行车情况
      </div>
      <div class="content1 animate__animated animate__fadeInUp">
        <right1
          :key="currentIndex"
          style="padding: 10px 0 0 20px"
          :data1="ddc_Data"
          :data2="ccql_Data"
          :xData="qlddc_xData"
        ></right1>
      </div>
    </div>
    <div class="c-item">
      <div class="title-item animate__animated animate__fadeInUp">
        充电设施建设情况
      </div>
      <div class="content1 animate__animated animate__fadeInUp">
        <right1
          :key="currentIndex"
          style="padding: 10px 0 0 20px"
          :data1="ddc_Data"
          :data2="ccql_Data"
          :xData="qlddc_xData"
        ></right1>
      </div>
    </div>
    <div class="c-item">
      <div class="title-item animate__animated animate__fadeInUp">
        清理液化石油气情况
      </div>
      <div class="content1 animate__animated animate__fadeInUp">
        <left1
          :key="currentIndex"
          style="padding: 10px 0 0 20px"
          :data1="dataOne"
          :data2="dataTow"
          :data3="dataThree"
        ></left1>
      </div>
    </div>
    <div class="c-item">
      <div class="title-item animate__animated animate__fadeInUp">
        建设消防通道、水源,拆除防护网
      </div>
      <div class="content1 animate__animated animate__fadeInUp">
        <left1
          :key="currentIndex"
          style="padding: 10px 0 0 20px"
          :data1="dataOne"
          :data2="dataTow"
          :data3="dataThree"
        ></left1>
      </div>
    </div>
    <div class="c-item">
      <div class="title-item animate__animated animate__fadeInUp">
        自防自救力量建设情况
      </div>
      <div class="content1 animate__animated animate__fadeInUp">
        <leida
          :key="currentIndex"
          :data1="dataOne"
          :data2="dataTow"
          :data3="dataThree"
        ></leida>
      </div>
    </div>
    <div class="c-item">
      <div class="title-item animate__animated animate__fadeInUp">
        各区宣传警示情况
      </div>
      <div class="header">
        <div class="h-item" v-for="(item, index) in headerList" :key="index">
          <div class="name">{{ item.name }}</div>
          ：
          <div class="name">{{ item.value }}</div>
        </div>
      </div>
      <div class="content2 animate__animated animate__fadeInUp">
        <right1
          :key="currentIndex"
          style="padding: 10px 0 0 20px"
          :data1="ddc_Data"
          :data2="ccql_Data"
          :xData="qlddc_xData"
        ></right1>
      </div>
    </div>
    <div class="c-item">
      <div class="title-item animate__animated animate__fadeInUp">
        完善治本政策和保障措施
      </div>
      <div class="content1 animate__animated animate__fadeInUp">
        <leida
          :key="currentIndex"
          :data1="dataOne"
          :data2="dataTow"
          :data3="dataThree"
        ></leida>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CountTo } from 'vue3-count-to'
import { useRoute, useRouter } from 'vue-router'
import left1 from '@/Pages/bigScreen/components/attackImprove/charts/left1.vue'
import right1 from '@/Pages/bigScreen/components/attackImprove/charts/right1.vue'
import leida from '@/Pages/bigScreen/components/attackImprove/charts/leida.vue'

import left3 from '@/Pages/bigScreen/components/baseInfo/charts/left3.vue'
import center2 from '@/Pages/bigScreen/components/dangerCondition/charts/center2.vue'
import right2 from '@/Pages/bigScreen/components/dangerCondition/charts/right2.vue'
// import pie from '@/Pages/bigScreen/components/baseInfo/charts/pie.vue'
import url1 from '@/assets/bigScreen/costa-bg.png'
const router = useRouter()
const currentIndex = ref(1)
const headerList = ref([
  { name: '房屋总数', value: '111' },
  { name: '已排查', value: '111' },
  { name: '自查隐患', value: '111' },
  { name: '自查率', value: '111' },
])
const dataOne = ref([846, 490, 281, 60, 34])
const dataTow = ref([670, 401, 121, 94, 8])
const dataThree = ref([26.27, 22.19, 132.23, 36.17, 325])

const ddc_Data = ref([12, 34, 66, 777, 899, 55, 334, 555, 222, 44, 55, 89])
const ccql_Data = ref([121, 314, 66, 77, 99, 525, 334, 55, 22, 414, 551, 89])
const qlddc_xData = ref([
  '东城区',
  '西城区',
  '朝阳区',
  '丰台区',
  '石景山区',
  '海淀区',
  '门头沟区',
  '房山区',
  '通州区',
  '顺义区',
  '昌平区',
  '大兴区',
])
const titleList = ref([
  {
    name: '经营性自建房数量',
    count: 1000,
  },
  {
    name: '经营性自建房数量',
    count: 2000,
  },
  {
    name: '经营性自建房数量',
    count: 3000,
  },
  {
    name: '经营性自建房数量',
    count: 4000,
  },
  {
    name: '经营性自建房数量',
    count: 5000,
  },
  {
    name: '经营性自建房数量',
    count: 6000,
  },
  {
    name: '经营性自建房数量',
    count: 7000,
  },
  {
    name: '经营性自建房数量',
    count: 8000,
  },
])
// 隐患处理总数
const spLinexData = ref([
  '东城区',
  '西城区',
  '朝阳区',
  '丰台区',
  '石景山区',
  '海淀区',
  '门头沟区',
  '房山区',
  '通州区',
  '顺义区',
  '昌平区',
  '大兴区',
])
const spLinesData = ref([12, 34, 66, 777, 899, 55, 334, 555, 222, 44, 55, 89])
const rLeftList = ref([
  {
    name: '防烟逃生面罩',
    url: url1,
  },
  {
    name: '防烟逃生面罩',
    url: url1,
  },
  {
    name: '防烟逃生面罩',
    url: url1,
  },
])
onMounted(() => {})
</script>

<style scoped lang="scss">
.box-con {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 1.7rem;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  // border: 1px solid red;
  .c-item {
    width: 24%;
    height: 48%;
    // border: 1px solid red;
    border: 2px solid #1c336c;
  }
}
.title-item {
  height: 4rem;
  line-height: 2rem;
  font-size: 1.5rem;
  padding-left: 1rem;
  // border: 1px solid red;
  background-image: url('@/assets/bigScreen1/title.png');
  background-repeat: no-repeat;
  background-size: 100% 90%;
}
.header {
  height: 4rem;
  // border: 1px solid #1c336c;
  display: flex;
  line-height: 4rem;
  justify-content: space-between;
  .h-item {
    width: 25%;
    border: 1px solid #1c336c;
    display: flex;
    justify-content: space-evenly;
  }
}
.content2 {
  height: calc(100% - 8rem);
  // border: 1px solid red;
}
.content1 {
  height: calc(100% - 4rem);
}
</style>
